<!-- @format -->

<template>
  <el-button ref="n-button" class="nuButton" v-bind="$attrs" v-on="$listeners" :type="type">
    <slot></slot>
  </el-button>
</template>
<script>
import _ from 'lodash';
export default {
  data() {
    return {};
  },
  props: ['type'],
  created() {
    /* 自动聚焦 */
    if (this.autofocus) {
      this.$nextTick(() => {
        this.$refs['n-button'].$el.focus();
      });
    }
    /* 防抖 */
    if (this.$listeners.click) {
      this.$listeners.click = _.debounce(this.$listeners.click, 500, { leading: true, trailing: false });
    }
  },
  methods: {
    handleClick: _.debounce(
      function() {
        // 防抖
        this.$emit('click');
      },
      300,
      { leading: true, trailing: false },
    ),
  },
};
</script>
<style scoped>
/* 按钮样式 */
.nuButton {
  margin: var(--button-body-margin);
  /* padding-left: var(--button-body-padding-left); 
  padding-right: var(--button-body-padding-right); */
  box-shadow: var(--button-box-shadow);
  border: var(--button-border);
  font-size: 13px;
  height: 32px;
  /* color: var(--button-color) ;
  background-color: var(--button-bgc) ; */
}

.el-button--primary {
  background-color: var(--button-bgc);
  border-radius: var(--button-border-radius) !important;
}

/*按钮点击后样式 */
.nuButton:hover {
  background: rgba(72, 118, 255, 1);
  border-color: rgba(72, 118, 255, 1);
  color: rgba(255, 255, 255, 1) ;
}
.nuButton.el-button--text:hover {
  background: none;
  color: var(--button-active-color) 
}
.el-button--text {
  border: none;
  color: rgba(72, 118, 255, 1);
}
</style>
